<!--
 * @version:
 * @Author: jiaqngzhen
 * @Company: aikucun
 * @Date: 2020-06-04 13:42:06
 * @LastEditors: jiaqingzhen
 * @LastEditTime: 2020-06-08 11:16:04
 * @Description:
-->
<template>
  <div class="product_recommend_warp">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-tabs
        v-model="active"
        animated
        background="transparent"
        :line-width="0"
        @click="onClickHandle"
      >
        <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name">
          <div class="product_item_warp">
            <product
              v-for="(item, index) in item.productList"
              :key="index"
              :productObj="item"
              @shareMakeMoney="shareMakeMoney"
              @addcart="addcart"
            ></product>
          </div>
        </van-tab>
      </van-tabs>
    </van-list>
  </div>
</template>
<script>
import product from './product.vue';

export default {
  components: { product },
  props: {
    tabs: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      active: 1,
      loading: false,
      finished: false,
      productObj: {}
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      this.loading = false;
    },
    shareMakeMoney() {
      this.setProductShareMixin({
        productNo: '705381959696548096',
        activityNo: '705381777227546880',
        price: '90',
        tagPrice: '89'
      });
    },
    onClickHandle() {
      console.error(this.active);
      // 如果当前的tab有商品数据，则不必去进行数据请求
      if (this.tabs[this.active].currentPage) return;
      // 数据请求之后
      this.tabs[this.active].currentPage = 1;
      this.tabs[this.active].productList = [
        ...this.tabs[this.active].productList,
        ...this.tabs[this.active].productList
      ];
      this.tabs[this.active].finished = true;
      this.finished = true;
      console.error(this.tabs[this.active].productList);
    },
    close() {
      if (!this.$refs.sku) return;
      this.$refs.sku.isShow = false;
    },
    skuPopupConfirmHandle(obj = {}) {
      const { mainProperties, currentProperties } = obj;
      this.$ubt.click({
        spm: '28.25.32',
        mainProperties: { ...mainProperties, keyword: this.keyWord },
        currentProperties
      });
    },
    addcart() {
      if (!this.$refs.sku) return;
      this.$refs.sku.isShow = true;
      this.productObj = {
        productNo: '705381959696548096'
      };
    }
  }
};
</script>
<style lang="scss">
.product_recommend_warp {
  padding-left: 0.2rem;
  .van-tab {
    height: 0.62rem;
    line-height: 0.62rem !important;
    text-align: center;
    span {
      font-size: 0.28rem;
      height: 0.62rem;
      font-family: PingFang SC;
      line-height: 0.62rem !important;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }

    &::after {
      content: '';
      display: block;
      width: 0.02rem;
      height: 0.26rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 1px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -1px;
      //   z-index: 999;
    }
    &:nth-last-child(1)::after {
      background: transparent;
    }
  }
  .van-ellipsis {
    overflow: visible;
  }
  .van-tab--active {
    width: 1.6rem;
    height: 0.62rem;
    background: rgba(255, 69, 55, 1);
    border-radius: 0.08rem;
    &::after {
      content: '';
      display: block;
      width: 1px;
      height: 0.26rem;
      background: rgba(255, 69, 55, 1);
      border-radius: 1px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1px;
    }
  }
  .product_item_warp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-right: 0.2rem;
  }
  [class*='van-hairline']::after {
    border: none;
  }
}
</style>
